import React,{Component} from 'react'
import { Input, Button, Form ,Cascader,Icon,Checkbox,Modal} from 'antd';
import * as api from '../../api/address'
import * as order from '../../api/order'
import PayProcess from './PayProcess'
const { TextArea } = Input;
const { confirm } = Modal;
const options = [
    {
      value: '河南省',
      label: '河南省',
      children: [
        {
          value: '郑州',
          label: '郑州',
          children: [
            {
              value: '二七区',
              label: '二七区',
            },
            {
                value: '金水区',
                label: '金水区',
            },
            {
                value: '高新区',
                label: '高新区',
            },
          ],
        },
      ],
    },
    {
      value: '江苏',
      label: '江苏',
      children: [
        {
          value: '南京',
          label: '南京',
          children: [
            {
              value: '中华门',
              label: '中华门',
            },
          ],
        },
      ],
    },
  ];
export default class OrderConfirm extends Component{
    constructor(props){
        super(props)
        this.state={
            regions:'',
            isDefault:false,
            address : [],
            defaultAddress:{
                mobile:'',
                receiver:'',
                address:'',
            },
            sty1:{display:'block'},
            sty2:{display:'none'},
            sty3:{display:'none'},
            orderProducts:[],
            sumPrice:0,
            postFee:12
        }
    }
    onChange = e => {
        console.log(e);
    };
    sel(e){
        this.setState({
            isDefault:e.target.checked
        })
    }
    change(value){
        let address = value.join('-')
        this.setState({
            regions:address
        })
    }
    add(){
        let receiver = this.refs.receiver.state.value
        let mobile = this.refs.mobile.state.value
        let address = this.refs.address.state.value
        let regions = this.state.regions
        console.log(receiver,mobile,address,regions)
        let isDefault = this.state.isDefault
        if(receiver!=undefined&&mobile!=undefined&&address!=undefined&&regions!=undefined){
            console.log('全部填写完毕')
            api.addAddress({receiver,mobile,address,regions,isDefault}).then(data=>{
                console.log(data)
                Modal.success({
                    title: '温馨提示',
                    content: '添加地址成功',
                })
                this.load()
                this.state.receiver.value = ''
                this.state.mobile.value = ''
                this.state.address.value = ''
                this.state.regions.value = ''
            })
        }else{
            console.log('有一项没有填写')
        }
    }
    load(){
        api.addressList().then(data=>{
            console.log(data.data)
            let arr = data.data.addresses
            if(arr.length==0){
                this.setState({
                    sty1:{display:'none'}
                })
            }else if(arr.length==1){
                this.setState({
                    sty1:{display:'block'},
                    defaultAddress:arr[0]
                })
            }else{
                this.setState({
                    sty1:{display:'none'},
                    sty2:{display:'block'},
                    defaultAddress:arr[0],
                    address:arr
                })
            }
        })
    }
    componentDidMount(){
        this.load()
        let product = localStorage.getItem('product')
        product = JSON.parse(product)
        let sum = 0
        product.map(v=>{
            sum += v.quantity*v.product.price
        })
        if(sum>=699){
            this.setState({
                orderProducts:product,
                sumPrice:sum,
                postFee:0
            })
        }else{
            this.setState({
                orderProducts:product,
                sumPrice:sum,
                postFee:12
            })
        }
           
    }
    selAddress(index,value){
        let els = document.getElementsByClassName('addressBox')
        let newEls = document.getElementsByClassName('tit')
        console.log(value)
        this.setState({
            defaultAddress:value
        })
        for(let i=0;i<els.length;i++){
            els[i].style.border = '1px solid #aaa'
            newEls[i].style.display='none'
        }
        let target = els[index]
        target.style.border="2px solid #BC8808"
        newEls[index].style.display='block'
    }
    invisible(){
        this.setState({
            sty2:{display:'none'},
            sty1:{display:'block'}
        })
    }
    showAll(){
        this.setState({
            sty2:{display:'block'},
            sty1:{display:'none'}
        })
    }
    submit(){
        if(this.state.defaultAddress.receiver == ''){
            console.log('地址为空')
            Modal.warning({
                title: '温馨提示',
                content: '亲，您没有选择收获地址',
            });
        }else{
            let params = this.state.defaultAddress;
            let arr = []
            this.state.orderProducts.map((v,i)=>{
                let obj = {
                    quantity:v.quantity,
                    price:v.product.price,
                    product:v.product._id
                }
                arr.push(obj)
            })
            params.orderDetails = arr
            order.subOrder(params).then(data=>{
                console.log(data)
                let _this = this
                confirm({
                    title: '温馨提示',
                    content: '请确认订单信息',
                    onOk() {
                        _this.props.history.push('./payFor')
                    },
                    onCancel() {
                      console.log('Cancel');
                    },
                });
                
            })
        }
    }
    render(){
        return(
            <div>
            <PayProcess style={{display:'block'}} name="1"/>
            <div style={{borderTop:'5px solid #000',background:'#fff'}} className="cart-order">
               <h2>订单确认</h2> 
               <div className="con_order">
                    <div className="order-detail">
                        <div className="pro-address">
                            <h3>确认收货地址 <a>[地址管理]</a></h3>
                            <dl style={this.state.sty1}>
                                <dt>姓名：
                                    <span>{this.state.defaultAddress.receiver}</span>
                                </dt>
                                <dd>电话：
                                    <span>{this.state.defaultAddress.mobile}</span>
                                </dd>
                                <dd>地址：
                                    <span>{this.state.defaultAddress.address}</span>
                                </dd>
                                <strong><Icon className="checkIcon" type="check" /></strong>
                            </dl>
                            {
                                this.state.address.map((v,i)=>
                                    <dl key={i} className="addressBox" onClick={()=>this.selAddress(i,v)} style={this.state.sty2}>
                                        <dt>姓名：
                                            <span>{v.receiver}</span>
                                        </dt>
                                        <dd>电话：
                                            <span>{v.mobile}</span>
                                        </dd>
                                        <dd>地址：
                                            <span>{v.address}</span>
                                        </dd>
                                        <strong className="tit"><Icon className="checkIcon" type="check" /></strong>
                                    </dl>
                                )
                            }
                            <button onClick={()=>this.invisible()} style={this.state.sty2} className="showAll"><Icon type="up" /></button>
                            <button onClick={()=>this.showAll()} style={this.state.sty1} className="showAll"><Icon type="down" /></button>
                            <ul>
                                <li>
                                    <p>姓名：</p>
                                    <Input type="text" ref="receiver" />
                                </li>
                                <li>
                                    <p>电话：</p>
                                    <Input type="text" ref="mobile" />
                                </li>
                                <li>
                                    <p>城市：</p>
                                     <Cascader options={options} onChange={this.change.bind(this)} changeOnSelect />
                                </li>
                                <li>
                                    <p>详细地址：</p>
                                    <Input type="text" ref="address" />
                                </li>
                                <li>
                                    <p></p>
                                    <Checkbox onChange={this.sel.bind(this)} >设置默认地址</Checkbox>
                                </li>
                                <li>
                                    <p></p>
                                    <button onClick={()=>this.add()}>添加</button>
                                </li>
                            </ul>
                           
                        </div>
                        <div className="order-one">
                            <h3>购买商品明细</h3>
                            {
                                this.state.orderProducts.map((v,i)=>{
                                    return(
                                        <div key={i} className="det-one">
                                            <img style={{height:'150px'}} src={v.product.coverImg} />
                                            <div className="check_item">
                                                <a href="#">{v.product.name}</a>
                                                <p>货号：3ZC3017910991</p>
                                                <div className="check_item_detail">
                                                    <dl>
                                                        <dt>颜色/尺码</dt>
                                                        <dd>灰粉条/M</dd>
                                                    </dl>
                                                    <dl>
                                                        <dt>售价</dt>
                                                        <dd>￥{v.product.price}</dd>
                                                    </dl>
                                                    <dl>
                                                        <dt>数量</dt>
                                                        <dd>{v.quantity}</dd>
                                                    </dl>
                                                    <dl>
                                                        <dt>小计</dt>
                                                        <dd>￥{v.quantity*v.product.price}</dd>
                                                    </dl>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="order-sum">
                        <h3>订单汇总</h3>
                        <p><span>商品总额：</span><span>￥{this.state.sumPrice}</span></p>
                        <p><span>邮费：</span><span>￥{this.state.postFee}</span></p>
                        <p><span>优惠金额：</span><span>￥-{parseInt(this.state.sumPrice*0.05)}</span></p>
                        <p><span>促销</span>699包邮</p>
                        <Input placeholder ="输入优惠券"/>
                        <Form.Item><Input placeholder ="输入优惠券密码"/><Button>使用优惠券</Button></Form.Item>
                        <p><span>实付金额：</span><span>￥{parseInt(this.state.sumPrice*0.95)+this.state.postFee}</span></p>
                         <TextArea placeholder="订单备注" allowClear onChange={()=>this.onChange()} />
                         <div className="o-btn">
                           <button onClick={()=>this.submit()} className="order-btn">提交订单</button>  
                         </div>
                         
                    </div>     
               </div>
            </div>

            </div>
        )
    }
}